<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Java文档搜索</title>
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/container.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
    <div class="top">
        <h1>JDK1.8 API搜索引擎</h1>
        <div class="search-div">
            <input class="search-input" type="text" name="query" placeholder="请输入搜索关键词" required>
            <button class="search-button" type="submit">搜索</button>
        </div>
    </div>

    <div class="container">
        <h1>搜索结果</h1>
        
    </div>

    <script>
        let pindex = 1;
        let totalPage = 1;
        //用来存用户搜索的内容
        let query = '';

        //如果有url中有query就证明是通过分页跳转的，直接发送ajax请求获取内容
        if(getURLParam("query") != '' && getURLParam("query") != null 
        && getURLParam("pindex") != '' && getURLParam("pindex") != null
        && getURLParam("totalPage") != '' && getURLParam("totalPage") != null) {
            query = getURLParam("query");
            pindex = getURLParam("pindex")
            totalPage = getURLParam("totalPage");
            console.log(totalPage);
            jQuery.ajax({
                type: "GET",
                url: "search?query=" + query + "&pindex=" + pindex,
                success: function(body) {
                    if (body.code == -1) {
                        alert(body.msg);
                    } else if (body.code == -2) {
                        alert(body.msg);
                    } 
                    else {
                        buildResult(body.data);
                    }
                }
            })
        }

        let button = jQuery(".search-button");
        button.click(function() {
            let input = jQuery(".search-input");
            query = input.val();
            if (query == null || query == "") {
                alert("您输入的内容为空，请重试");
                return;
            }
            //先发起一个ajax请求查看总页码数
            jQuery.ajax({
                type: "GET",
                url: "totalpage?query=" + query,
                success: function(body) {
                    if(body.code == -1) {
                        alert(body.msg);
                    } else if(body.data == 0) {
                        //没有结果就直接返回
                        alert("没有查询到任何结果～");
                        return;
                    } else {
                        totalPage = body.data;
                        //如果搜索新词，就清除展示过的元素，并且将index置1
                        let container = jQuery(".container");
                        container.html("<h1>搜索结果</h1>");
                        pindex = 1;
                        getResult();
                    }
                }
            })
            
        })

        function getResult() {
            jQuery.ajax({
                type: "GET",
                url: "search?query=" + query + "&pindex=" + pindex,
                success: function(body) {
                    if(body.code == -1) {
                        alert(body.msg);
                    } else if (body.code == -2) {
                        alert(body.msg);
                    } else {
                        buildResult(body.data);
                    }
                }
            })
        }

        function buildResult(data) {
            let container = jQuery(".container");

            let countDiv = document.createElement('div');
            countDiv.innerHTML = "以下是" + data.length + "个结果，共" + totalPage + "页, " + "当前页码为: " + pindex;
            countDiv.className = 'count';
            container.append(countDiv);

            for(let item of data) {
                let resultDiv = document.createElement('div');
                resultDiv.className = 'result';
                //拼接标题
                let titleh3 = document.createElement('h3');
                let titlea = document.createElement('a');
                titlea.href = item.url;
                titlea.innerHTML = item.title;
                titleh3.appendChild(titlea)
                resultDiv.appendChild(titleh3);
                //拼接描述
                let desc = document.createElement('p');
                desc.innerHTML = item.desc;
                resultDiv.appendChild(desc);
                //拼接url
                let urlp = document.createElement('p');
                let urla = document.createElement('a');
                urla.href = item.url;
                urla.innerHTML = item.url;
                urlp.appendChild(urla);
                resultDiv.appendChild(urlp);

                container.append(resultDiv); 
            }
            //拼接分页按钮
            let pagnation = document.createElement('div');
            pagnation.className = "pagnation-wrapper";
            //首页
            let item1 = document.createElement('button');
            item1.className = "pagnation-item";
            item1.innerHTML = '首页';
            item1.addEventListener('click', function() {
                location.href = "search.html?query=" + query + "&pindex=" + 1 + "&totalPage=" + totalPage;
            })
            //上一页
            let item2 = document.createElement('button');
            item2.className = "pagnation-item";
            item2.innerHTML = '上一页';
            item2.addEventListener('click', function() {
                if(parseInt(pindex) <= 1) {
                    alert("已经是第一页了，不可跳转到上一页！");
                    return false;
                }
                pindex = parseInt(pindex) -1;
                location.href = "search.html?query=" + query + "&pindex=" + pindex + "&totalPage=" + totalPage;
            })
            //下一页
            let item3 = document.createElement('button');
            item3.className = "pagnation-item";
            item3.innerHTML = '下一页';
            item3.addEventListener('click', function() {
                if(parseInt(pindex) >= parseInt(totalPage)) {
                    alert("已经是最后一页了，不可跳转到下一页！");
                    return false;
                }
                pindex = parseInt(pindex) + 1;
                location.href = "search.html?query=" + query + "&pindex=" + pindex + "&totalPage=" + totalPage;
            })
            //末页
            let item4 = document.createElement('button');
            item4.className = "pagnation-item";
            item4.innerHTML = '末页';
            item4.addEventListener('click', function() {
                location.href = "search.html?query=" + query + "&pindex=" + totalPage + "&totalPage=" + totalPage;
            })
            pagnation.appendChild(item1);
            pagnation.appendChild(item2);
            pagnation.appendChild(item3);
            pagnation.appendChild(item4);

            container.append(pagnation);
        }

    </script>
</body>
</html>
